<template>
<!--  开平订单-->
  <div id="pb-div">
        <div class="pingban-box">
             <div class="title-pingban">
               <i class="icon-shujujiagong" style="margin-top: 4px "></i>
               <h3 style="margin: 0;">&nbsp;开平订单添加</h3>
                <div style="display: flex;margin-left: 280px">
                   <el-tag >原料: {{smallTypeName}}&nbsp;【{{otherMsg.rawSpecification}}】</el-tag>
                  <el-tag style="margin-left: 10px">开平重量: {{otherMsg.rawWeigh}} 公斤</el-tag>
                  <el-tag style="margin-left: 10px">数量:{{otherMsg.juanbanQuantity}}卷</el-tag>
                </div>
               <div style="margin-left: 310px;padding-bottom: 5px;display: flex">
                 <h4 style="padding-top: 5px">经办人:&nbsp;</h4>
                 <el-tag type="warning" >{{realName}}</el-tag>
               </div>

             </div>
          <div class="pingban-box-box">
            <div class="title-pingban2">
              <h4 style="margin: 3px 6px 0px 17px;">生成产品</h4>
              <div class="title-pingban2-detail" style="border-top-left-radius: 6px;width: 200px">
                <span>类别</span>
              </div>
              <div class="title-pingban2-detail" style="width: 150px">
                <span>厚度</span>
              </div>
              <div class="title-pingban2-detail" style="width: 470px">
                <span>理算规格</span>
              </div>
              <div class="title-pingban2-detail" style="width: 200px">
                <span>张数</span>
              </div>
              <div class="title-pingban2-detail" style="width:120px;border-right:1px solid #adacac ;border-top-right-radius: 6px">
                操作方式
              </div>
            </div>
<!--            第一-->
            <el-form  :model="no1" :rules="rules" ref="formNo1" >
            <div class="sale-detail"  style="margin-top: 10px">
                 <div class="sale-detail-number" >
<!--                   <span>&nbsp;</span>-->
                   <i class="icon-shuzi1" style="padding-left: 5px"></i>
                 </div>
              <el-select class="sale-detail-leibie" v-model="no1.leibie"   style="width: 180px;margin-left: 4px">
                <el-option
                  v-for="item in leibie"
                  :key="item.smallTypeId"
                  :label="item.smallTypeName"
                  :value="item.smallTypeId">
                </el-option>
              </el-select>
              <div class="sale-detail-houdu">
                <el-form-item prop="houdu">
                <el-input readonly onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no1.houdu" placeholder="厚度"></el-input>
                </el-form-item>
              </div>
              <div class="sale-detail-lisuan">
                <el-form-item prop="long1"><el-input class="sale-detail-lisuan-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"   v-model="no1.long1" placeholder="长"></el-input></el-form-item>
                <i class="icon-required xinghao"></i><el-form-item prop="wide"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no1.wide" placeholder="宽"></el-input></el-form-item>
                <i class="icon-required xinghao"></i><el-form-item prop="height"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no1.height" placeholder="高"></el-input></el-form-item>
              </div>
              <div class="sale-detail-quantity">
                <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no1.quantity" placeholder="张"></el-input></el-form-item>
              </div>
              <div class="sale-detail-play" v-if="saleOrderDetailCount===1">
                <el-button type="success" icon="icon-jiahao" circle size="mini" @click="saleOrderDetailCount++"></el-button>
                <el-button type="danger" icon="icon-cuowu" circle @click="no1ErrorMsg" size="mini"></el-button>
              </div>
            </div>
            </el-form>
<!--            第二-->
            <el-form v-if="saleOrderDetailCount>=2"   :model="no2" :rules="rules" ref="formNo2" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi2"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no2.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.smallTypeId"
                    :label="item.smallTypeName"
                    :value="item.smallTypeId">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="houdu">
                    <el-input readonly onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no2.houdu" placeholder="厚度"></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-lisuan">
                  <el-form-item prop="long1"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no2.long1" placeholder="长"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i><el-form-item prop="wide"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no2.wide" placeholder="宽"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i> <el-form-item prop="height"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no2.height" placeholder="高"></el-input></el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no2.quantity" placeholder="张"></el-input></el-form-item>
                </div>

                <div class="sale-detail-play"  v-if="saleOrderDetailCount===2">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第三-->
            <el-form v-if="saleOrderDetailCount>=3"   :model="no3" :rules="rules" ref="formNo3" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi3"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no3.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.smallTypeId"
                    :label="item.smallTypeName"
                    :value="item.smallTypeId">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="houdu">
                    <el-input readonly onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no3.houdu" placeholder="厚度"></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-lisuan">
                  <el-form-item prop="long1"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no3.long1" placeholder="长"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i><el-form-item prop="wide"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no3.wide" placeholder="宽"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i> <el-form-item prop="height"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no3.height" placeholder="高"></el-input></el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no3.quantity" placeholder="张"></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===3">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第四-->
            <el-form v-if="saleOrderDetailCount>=4"   :model="no4" :rules="rules" ref="formNo4" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi4"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no4.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.smallTypeId"
                    :label="item.smallTypeName"
                    :value="item.smallTypeId">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="houdu">
                    <el-input readonly onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no4.houdu" placeholder="厚度"></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-lisuan">
                  <el-form-item prop="long1"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no4.long1" placeholder="长"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i><el-form-item prop="wide"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no4.wide" placeholder="宽"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i> <el-form-item prop="height"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no4.height" placeholder="高"></el-input></el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no4.quantity" placeholder="张"></el-input></el-form-item>
                </div>

                <div class="sale-detail-play"  v-if="saleOrderDetailCount===4">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第五-->
            <el-form v-if="saleOrderDetailCount>=5"   :model="no5" :rules="rules" ref="formNo5" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi5"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no5.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.smallTypeId"
                    :label="item.smallTypeName"
                    :value="item.smallTypeId">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="houdu">
                    <el-input readonly onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no5.houdu" placeholder="厚度"></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-lisuan">
                  <el-form-item prop="long1"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no5.long1" placeholder="长"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i><el-form-item prop="wide"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no5.wide" placeholder="宽"></el-input></el-form-item>
                  <i class="icon-required xinghao"></i> <el-form-item prop="height"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-lisuan-detail"  v-model="no5.height" placeholder="高"></el-input></el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no5.quantity" placeholder="张"></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===5">
                  <el-button type="success" icon="icon-jiahao" @click="no5ErrorMsg" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
            <div style="margin-left: 17px;width: 1215px">
              <el-divider ><span  style="display: block;background-color:#f2f2f7;color: #409EFF;font-size: 16px;font-weight: 700 ">其余选项</span></el-divider>
            </div>



            <el-form :label-position="labelPosition" label-width="85px" :rules="rules" :model="otherMsg" ref="otherMsgFrom">
            <div class="otherMsg">
              <div style="flex: 400px">
                   <el-form-item label="开平规格:" prop="realSpecification">
                     <el-input  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  v-model="otherMsg.realSpecification" style="width: 135px"></el-input>
                   </el-form-item>
                   <el-form-item label="开平费用:" prop="price">
                     <el-input  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="otherMsg.price" placeholder="请填写单价" style="width: 135px;color: black"  ></el-input>
                     <span class="danwei">元&nbsp;</span>
                   </el-form-item>
                   <el-form-item label="开平厂家:" prop="kaiPingGuyName" >
                     <el-button  plain style="min-width: 135px"  @click="dialogVisible = true" >{{otherMsg.kaiPingGuyName===null?tipClient:otherMsg.kaiPingGuyName}}</el-button>
                      <el-input v-model="this.otherMsg.kaiPingGuyName" readonly style="display: none"  ></el-input>
                   </el-form-item>
                <el-dialog
                  title="开平厂家选择"
                  :visible.sync="dialogVisible"
                  width="70%"
                  top="6vh"
                  >
                <KaiPingGuyPop @getKaiPingWithChildren="getKaiPingWithChildren" />
                </el-dialog>

               </div>
              <div style="flex: 400px">
                <el-form-item label="开平时间:" prop="processingTime">
                  <el-date-picker
                    v-model="otherMsg.processingTime"
                    default-value
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="库房选择:" prop="warehouseId" style="margin-bottom: 10px">
                  <el-select v-model="otherMsg.warehouseId" placeholder="请选择">
                    <el-option
                      v-for="item in wareHouseList"
                      :key="item.warehouseId"
                      :label="item.warehouseName"
                      :value="item.warehouseId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注:" >
                  <el-input show-word-limit maxlength="100" type="textarea" v-model="otherMsg.remark" style="width: 220px"  :rows="3"></el-input>
                </el-form-item>

              </div>
              <div style="flex: 350px;margin-top: 20px"  >
                <div style="width: 100%">
                  <el-button  type="primary" @click="submitForm" :loading="addOrderIng" style="width: 300px"><span class="btn-s">确认开平</span></el-button>
                </div>
                <div style="width: 100%;margin-top: 20px">
                  <el-button type="danger" @click="resetForm" :loading="addOrderIng" style="width: 300px" ><span class="btn-s">重新填写</span></el-button>
                </div>
              </div>
            </div>
            </el-form>


          </div>

        </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";
import KaiPingGuyPop from "../../components/pop/KaiPingGuyPop";
export default {
  name: "KaiPingOrder",
  components: {KaiPingGuyPop},
  data() {
    return {
      labelPosition:'right',
      leibie: [],
      wareHouseList:[],
      smallTypeName:null,
      no1: {
        leibie: null,
        houdu: null,
        long1: null,
        wide: null,
        height: null,
        quantity: null,
      },
      no2: {
        leibie: null,
        houdu: null,
        long1: null,
        wide: null,
        height: null,
        quantity: null,
      },
      no3: {
        leibie: null,
        houdu: null,
        long1: null,
        wide: null,
        height: null,
        quantity: null,
      },
      no4: {
        leibie: null,
        houdu: null,
        long1: null,
        wide: null,
        height: null,
        quantity: null,
      },
      no5: {
        leibie: null,
        houdu: null,
        long1: null,
        wide: null,
        height: null,
        quantity: null,
      },
      otherMsg:{
        realSpecification:null,
        kaiPingGuy:null,
        price:null,
        processingTime:null,
        remark:null,
        kaiPingGuyName:null,
        warehouseId:null,
        rawMaterial:null,
        rawSpecification:null,
        rawWeigh:null,
        juanbanQuantity:this.$route.params.quantity,
        inventoryId:this.$route.params.inventoryId
      },

      rules: {
        houdu: [
          {required: true, message: '厚度不能为空', trigger: 'change'}
        ],
        long1: [
          {required: true, message: '长不能为空', trigger: 'change'}
        ],
        wide: [
          {required: true, message: '宽不能为空', trigger: 'change'}
        ],
        height: [
          {required: true, message: '高不能为空', trigger: 'change'}
        ],
        quantity: [
          {required: true, message: '张数不能为空', trigger: 'change'}
        ],
        realSpecification: [
          {required: true, message: '请填写开平规格', trigger: 'change'}
        ],
        processingTime:[
          { type: 'date',required: true, message: '请选择开平时间', trigger: 'change'}
        ],
        kaiPingGuyName: [
          {required: true, message: '请选择开平厂家', trigger: 'change'}
        ],
        price: [
          {required: true, message: '请填写开平费用', trigger: 'change'}
        ],
        warehouseId: [
          {required: true, message: '请选择开平完毕后存入的库房', trigger: 'change'}
        ],
      },
      saleOrderDetailList:[],
      saleOrderDetailCount:0,
      realName:'',
      tipClient:'点击选择开平厂家',
      dialogVisible: false,
      isNewKaiPingGuy:false,
      addOrderIng:false,
      formhoudu:null,
      formlong:null,
      formwide:null,
    }
  },
  created() {
    get("/api/v1/inventory/findid",{inventoryId: this.$route.params.inventoryId}).then(resp=>{
      this.smallTypeName=resp.data[0].small_type_name
      this.otherMsg.rawSpecification=resp.data[0].specification
      this.otherMsg.rawMaterial=resp.data[0].small_type_id
      this.otherMsg.rawWeigh=resp.data[0].weight

      this.no1.houdu=resp.data[0].specification
      this.no2.houdu=resp.data[0].specification
      this.no3.houdu=resp.data[0].specification
      this.no4.houdu=resp.data[0].specification
      this.no5.houdu=resp.data[0].specification
      this.formhoudu=resp.data[0].specification


      this.no1.long1=resp.data[0].long1
      this.no2.long1=resp.data[0].long1
      this.no3.long1=resp.data[0].long1
      this.no4.long1=resp.data[0].long1
      this.no5.long1=resp.data[0].long1
      this.formlong=resp.data[0].long1

      this.no1.wide=resp.data[0].wide
      this.no2.wide=resp.data[0].wide
      this.no3.wide=resp.data[0].wide
      this.no4.wide=resp.data[0].wide
      this.no5.wide=resp.data[0].wide
      this.formwide=resp.data[0].wide
    })

    this.otherMsg.processingTime=new Date();
  },
  mounted() {
    get("/api/v1/token/showRealName").then(resp=>{
      this.realName=resp.data
    })
    this.saleOrderDetailCount=1
    get("/api/v1/warehouse/show/select").then(resp=>{
      this.wareHouseList=resp.data
      this.otherMsg.warehouseId=1
    })

    //获取平板类型的接口
    get("/api/v1/comparison",{juanBanId:this.$route.params.smallTypeId}).then(resp=>{
      this.leibie.unshift(resp.data)
      this.no1.leibie=resp.data.smallTypeId
      this.no2.leibie=resp.data.smallTypeId
      this.no3.leibie=resp.data.smallTypeId
      this.no4.leibie=resp.data.smallTypeId
      this.no5.leibie=resp.data.smallTypeId
    })
  },
  methods: {
    getKaiPingWithChildren(kaiPingGuyMsg){

      this.otherMsg.kaiPingGuyName=kaiPingGuyMsg.kaiPingGuy.kaipingguyName
      this.isNewKaiPingGuy=kaiPingGuyMsg.isNewKaiPingGuy
      this.otherMsg.kaiPingGuy=kaiPingGuyMsg.kaiPingGuy
      this.dialogVisible=false
    },
    getDataUtil(datanum){
      if (datanum===1){
        return this.no1;
      }
      if (datanum===2){
        return this.no2;
      }
      if (datanum===3){
        return this.no3;
      }
      if (datanum===4){
        return this.no4;
      }
      if (datanum===5){
        return this.no5;
      }
    },
    no5ErrorMsg(){
      this.$message.error("已经加到底咯")
    },
    no1ErrorMsg(){
      this.$message.error('已经不能再减少咯')

    },
    submitForm() {
      this.addOrderIng=true

      var temp=true;
      for (var i = 1; i <=this.saleOrderDetailCount ; i++) {
        this.$refs['formNo'+i].validate((valid) => {
          if (valid) {
          } else {
            temp=false
            return false;
          }
        });
      }

      this.$refs['otherMsgFrom'].validate((valid) => {
        if (valid) {
        } else {
          temp=false
          return false;
        }
      });
      if (temp){

        let kaipingOrderVo={
          kaipingOrderDetailVoList:this.saleOrderDetailList,
          otherMsg:this.otherMsg,
          isNewKaiPingGuy:this.isNewKaiPingGuy
        }
        var _this=this
        post('/api/v1/kaiping/submit',kaipingOrderVo).then(resp=>{
          if (resp.data.code===1){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.addOrderIng=false
           this.$router.push({name:'KaiPingMsg'})
          }else {
            this.$message.error(resp.data.msg);
            this.addOrderIng=false

          }
        }).catch(resp=>{
          this.$message.error("系统好像出问题了,快去找开发")
          this.addOrderIng=false
        })

      }else {
        this.addOrderIng=false
      }
    },
    resetForm(){
      for (var i = 1; i <=this.saleOrderDetailCount ; i++) {
        this.$refs['formNo'+i].resetFields();
      }
      this.$refs['otherMsgFrom'].resetFields();
      this.otherMsg.kaiPingGuy=null
      this.otherMsg.warehouseId=1
      this.otherMsg.remark=null
      this.otherMsg.countQuantity=0

      this.no1.houdu=this.formhoudu;
      this.no2.houdu=this.formhoudu;
      this.no3.houdu=this.formhoudu;
      this.no4.houdu=this.formhoudu;
      this.no5.houdu=this.formhoudu;

      this.no1.long1=this.formlong;
      this.no2.long1=this.formlong;
      this.no3.long1=this.formlong;
      this.no4.long1=this.formlong;
      this.no5.long1=this.formlong;

      this.no1.wide=this.formwide;
      this.no2.wide=this.formwide;
      this.no3.wide=this.formwide;
      this.no4.wide=this.formwide;
      this.no5.wide=this.formwide;
    }
  },
  watch:{
    'saleOrderDetailCount':function (newVal,oldVal){
       if (newVal-oldVal===1){
         let dataUtil = this.getDataUtil(newVal);
         this.saleOrderDetailList.push(dataUtil);
       }else {
         this.saleOrderDetailList.pop();
       }

    }



  }
}
</script>

<style scoped>
.btn-s{
  font-size: 20px;
  font-weight: bold;
}
.danwei{
  font-weight: bold;
}

h4{
  margin: 0;
}
.otherMsg{
  margin-left: 17px;
  display: flex;
  /*height: 400px;*/
  width: 1250px;
  flex-wrap: wrap;
  position: relative;
}
.el-divider{
  background-color: #2c3e50;

}
.el-divider--horizontal{
  margin-top: 12px;
  margin-bottom: 12px;
}
.el-divider__text{
  background-color: #f2f2f7 ;
  /*padding-left: 4px;*/
  /*padding-right: 4px;*/
}
.sale-detail-play{
  margin-left: 29px;
}
.sale-detail-leibie{
  margin-left: 9px;
}
.xinghao{
  margin-top: 10px;
}
.sale-detail-number{
  margin-top: 10px;
  margin-left: 45px;
  margin-right: 24px;
}

.sale-detail-quantity{
      margin-left: 16px;
}
.sale-detail-quantity-detail{
  width: 185px;

}
.sale-detail-lisuan-detail{
  width: 139px;
}
.sale-detail-lisuan{
  display: flex;
  margin-left: 18px;
}
.sale-detail-houdu{
  width: 135px;
  margin-left: 20px;
}
.sale-detail{
  display: flex;
  width: 100%;
  /*margin-top: 10px;*/

}
.pingban-box-box{
  width: 98.5%;
  height: 590px;
  background-color: #f2f2f7;
  border-radius: 9px;
}
.title-pingban2-detail{
  border-top: 1px solid #adacac;
  border-left:1px solid #adacac ;
  border-bottom: 4px solid #2c3e50;
  height: 25px;
  text-align: center;
  width: 100px;
  background-color: white;
}
.title-pingban2{
  display: flex;
  padding-top: 15px;
}
.title-pingban{
  padding-top: 10px;
  padding-left: 5px;
  display: flex;
  /*width: 100%;*/
  /*height: 30px;*/

}
.pingban-box{
  margin-top: 20px;
  margin-left: 20px;
  width: 96%;
  height: 650px;
  padding-left: 17px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
#pb-div{
  background-color: #f2f4fa;
  width: 100%;
  height: 692px;
}
</style>
